<template>
	<el-dialog v-model="rulesDialogVisible" title="设置限制规则" width="80%">
		<sc-form-table :addTemplate="{ areaCode: [], areaOptions: [] }" v-model="limitRules">
			<template #default>
				<el-table-column>
					<template #header>
						<div class="flex-align-center flex-start">城市地区</div>
					</template>
					<template #default="scope">
						<el-select
							v-model="scope.row.areaCode[0]"
							placeholder="省份"
							clearable
							@change="areaOptionsChange(scope.row,0,scope.$index)"
						>
							<el-option
								v-for="item in areaOptions[0]"
								:key="item.code"
								:label="item.name"
								:value="item.code"
							/>
						</el-select>
						<el-select
							v-model="scope.row.areaCode[1]"
							placeholder="城市"
							clearable
							@change="areaOptionsChange(scope.row,1,scope.$index)"
						>
							<el-option
								v-for="item in scope.row.areaOptions[1]"
								:key="item.code"
								:label="item.name"
								:value="item.code"
							/>
						</el-select>
						<el-select
							v-model="scope.row.areaCode[2]"
							placeholder="地区"
							clearable
							@change="areaOptionsChange(scope.row,2,scope.$index)"
						>
							<el-option
								v-for="item in scope.row.areaOptions[2]"
								:key="item.code"
								:label="item.name"
								:value="item.code"
							/>
						</el-select>
					</template>
				</el-table-column>
			</template>
		</sc-form-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="rulesDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitRules">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import {defineExpose, onMounted, reactive, ref} from 'vue'
import api from '@/api'
import to from 'await-to-js'
import {ElMessage} from "element-plus";

const rulesDialogVisible = ref(false)

const limitRules = reactive([])
const rulesDialogId = ref(0);
const areaOptions = reactive([[], [], []])

const areaOptionsChange = async (row, colIndex, index) => {
	const v = row.areaCode[colIndex];
	console.log(v);
	console.log(colIndex);
	if (!v) {
		limitRules[index].areaCode[colIndex + 1] = "";
		row.areaOptions[colIndex + 1] = [];
		return;
	}
	if (v.length > 4) {
		return;
	}
	const areaCodeIndex = v.length / 2;
	row.areaOptions[colIndex+1] = areaOptions[colIndex + 1].filter((vi) => {
		return vi.code.indexOf(v) === 0;
	});
	limitRules[index].areaCode[areaCodeIndex] = "";
	if (v.length === 2) {
		limitRules[index].areaCode[2] = "";
	}
}

const open = async (id) => {
	rulesDialogId.value = id;
	rulesDialogVisible.value = true;
	const [err, resAll] = await to(api.shop.goodsLimit.getLimitRules({
		id:rulesDialogId.value
	}).then(res => res));
	if (err) {
		ElMessage.error(err.message);
		return;
	}
	let res = resAll.data
	console.log(res);
	limitRules.length = 0;
	if (!res) {
		return;
	}

	res.map(async (item) => {
		let vv;
		let vvv;
		let tmpStr = item.code_array;
		switch (item.code_text.length) {
			case 2:
				vv = areaOptions[1].filter((vi) => {
					return vi.code.indexOf(item.code_text) === 0;
				})
				limitRules.push({
					areaOptions: {1:vv},
					areaCode: {
						0: item.code_text,
						1: "",
						2: ""
					}
				});
				break;
			case 4:
				vv = areaOptions[1].filter((vi) => {
					return vi.code.indexOf(tmpStr[0]) === 0;
				})
				vvv = areaOptions[2].filter((vi) => {
					return vi.code.indexOf(item.code_text) === 0;
				})
				limitRules.push({
					areaOptions: {1:vv,2:vvv},
					areaCode: {
						0: tmpStr[0],
						1: item.code_text,
						2: ""
					}
				});
				break;
			case 6:
			default:
				vv = areaOptions[1].filter((vi) => {
					return vi.code.indexOf(tmpStr[0]) === 0;
				})
				vvv = areaOptions[2].filter((vi) => {
					return vi.code.indexOf(tmpStr[0] + tmpStr[1]) === 0;
				})
				limitRules.push({
					areaOptions: {1:vv,2:vvv},
					areaCode: {
						0: tmpStr[0],
						1: tmpStr[0] + tmpStr[1],
						2: item.code_text
					}
				});
				break;
		}

	});
}

const submitRules = async () => {
	console.log(limitRules);
	let submitData = {
		id: rulesDialogId.value,
		limit_rules: []
	};
	limitRules.map((item) => {
		if (item.areaCode[2]) {
			submitData.limit_rules.push(item.areaCode[2]);
		}
		else if (item.areaCode[1]) {
			submitData.limit_rules.push(item.areaCode[1]);
		}
		else if (item.areaCode[0]) {
			submitData.limit_rules.push(item.areaCode[0]);
		}
	});
	api.shop.goodsLimit.updateLimitRules(submitData).then((res) => {
		console.log(res);
		ElMessage.success("编辑成功");
		rulesDialogVisible.value = false;
	});
}

const getLevelData = async (level, index) => {
	const [err, resAll] = await to(api.gdshop.common.areaLevelList({ level: level }).then(res => res));
	if (err) {
		ElMessage.error(err.message);
		return;
	}
	if (resAll.code === 0) {
		areaOptions[index] = resAll.data;
	}
}

const getAreaLevelList = async () => {
	getLevelData(1, 0);
	getLevelData(2, 1);
	getLevelData(3, 2);
}

defineExpose({
	open
})

onMounted(() => {
	getAreaLevelList();
})

</script>

<style scoped>

</style>
